<template>
  <div class="popover-input-wrap" :style="`width: ${width};`">
    <div>
      <FormPopover ref="popoverRef" :content="content" :popover-list="popoverList" />
    </div>
    <div v-show="content" class="el-icon-circle-close" @click="handleClear" />
    <div class="el-icon-search" @click="handleSelect" />
  </div>
</template>
<script>
import FormPopover from '../DevelopPlanForm/FormPopover';
export default {
  components: {
    FormPopover
  },
  props: {
    width: {
      type: String,
      default: '61%'
    },
    content: {
      type: String,
      default: ''
    },
    popoverList: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    handleSelect () {
      this.$emit('select')
    },
    handleClear () {
      // eslint-disable-next-line no-unused-expressions
      this.$refs?.popoverRef?.clearData()
      this.$emit('clear')
    }
  }
}
</script>
<style lang="less" scoped>
.popover-input-wrap {
  display: flex;
  border: 1px solid #d7dae2;
  border-radius: 4px;
  line-height: 20px;
  height: 32px;
  padding: 5px 10px;
  div:first-child {
    flex: 1;
    width: 90%;
    span {
      color: #bcc0c8;
      font-size: 12px;
    }
  }
  .el-icon-circle-close, .el-icon-search {
    display: flex;
    align-items: center;
    color: #bcc0c8;
    cursor: pointer;
    &:hover {
      color: #63a8fc;
    }
  }
  .el-icon-circle-close {
    margin-right: 5px;
  }
}
</style>
